<style lang="less" scoped>
.productImages {
    .big-img {
        img {
            width: 100%;
            height: 444px;
        }
    }

    .imgs {
        margin-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        img {
            width: 100%;
            height: 64px;
            cursor: pointer;
        }
        .col-4-1 {
          padding: 0;
          width: 22%;
          &:not(:last-child){
            margin-right: 4%;
          }
        }
    }
}
</style>

<template>
<div id="productImages" class="productImages">
  <div class="row big-img">
    <div class="col-xs-12">
      <keep-alive>
        <img-zoom :img="bigImgSrc" :url="bigImgSrc" :width="'100%'" :magnify="1.2" />
      </keep-alive>
    </div>
  </div>
  <div class="row imgs">
    <div class="col-xs-3 col-4-1" v-for="(img, index) in allImages" :key="index">
      <img :src="img.image_url" alt="" @click="smallImgHover(img.image_url)">
    </div>
  </div>
</div>
</template>

<script>
import ImgZoom from './imgZoom.vue'

export default {
  name: "productImages",
  components: {
    'imgZoom': ImgZoom
  },
  props: {
    allImages: {
      required: true,
      type: Array
    }
  },

  data: function data() {
    return {
      bigImgSrc: ''
    }
  },
  created() {
    this.bigImgSrc = this.allImages[0].image_url
  },

  methods: {
    smallImgHover: function(src) {
      this.bigImgSrc = src
    }
  }
}
</script>
